/* * @Author: 维尼小熊 * @Date: 2022-04-15 12:23:38 * @Last Modified by:
维尼小熊 * @Last Modified time: 2022-04-15 14:38:00 * @描述:选择下一审批节点信息
*/

<template>
  <el-dialog
    width="35%"
    :title="$t('dialog.diaNextNodeInfo')"
    v-model="dialogNextNodeisible"
    :before-close="() => {}"
    :show-close="false"
  >
    <el-container>
      <el-main class="el-main-tree">
        <el-form label-width="0px">
          <el-checkbox-group v-model="nextStepIds" size="small" border>
            <el-col
              style="width:100%"
              v-for="item in nextNodeInfo"
              :key="item.nextStepId"
            >
              <el-form-item class="next-node-info-cs" size="small"
                ><div
                  :class="{
                    'el-slected-editor-disabled':
                      item.approvalRangeType === 3 ||
                      (nextStepId !== item.nextStepId && parallelTask == 1),
                  }"
                >
                  <el-checkbox
                    @change="handleCheckedCitiesChange($event, item)"
                    style="margin-right:15px"
                    :label="item.nextStepId"
                    border
                    >{{
                      $i18n.locale === "zh-cn"
                        ? item.nextStepCNName
                        : item.nextStepENName
                    }}</el-checkbox
                  >
                  <el-select
                    v-if="
                      item.approvalRangeType != 4 && item.approvalRangeType != 5
                    "
                    @remove-tag="clearValue($event, item)"
                    @clear="item.nextStepApproverEmps = []"
                    v-model="item.nextStepApproverEmpId"
                    multiple
                    style="width:75%"
                    collapse-tags
                    :placeholder="
                      $t('formi18n.field_property_selectType_select')
                    "
                  >
                    <el-option
                      v-for="oitem in item.nextStepApproverEmps"
                      :key="oitem.empId"
                      :label="
                        this.$i18n.locale === 'zh-cn'
                          ? oitem.cnName
                          : oitem.enName
                      "
                      :value="oitem.empId"
                      :disabled="1 == 1"
                    ></el-option>
                  </el-select>
                  <el-button
                    v-if="
                      item.approvalRangeType != 4 && item.approvalRangeType != 5
                    "
                    circle
                    icon="el-icon-plus"
                    plain
                    type="primary"
                    @click="dialogTableAddSystemControl(item)"
                    :disabled="
                      item.approvalRangeType === 3 ||
                        (nextStepId !== item.nextStepId && parallelTask == 1)
                    "
                  ></el-button>
                </div>
              </el-form-item>
              <el-divider></el-divider>
            </el-col>
          </el-checkbox-group>
        </el-form>
      </el-main>
    </el-container>
    <div class="el-dialog-content">
      <dialog-flow-employee-componet-vue
        ref="flowemp"
        @confirmEvent="formDialogEvent"
      >
      </dialog-flow-employee-componet-vue>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          :size="'small'"
          type="danger"
          icon="el-icon-back"
          @click="confirm('canle')"
          >{{ $t("table.Global_Cancel") }}</el-button
        >
        <el-button
          :size="'small'"
          type="primary"
          icon="el-icon-check"
          @click="confirm(processType == 7 ? 'circulated' : 'sumbit')"
          >{{ $t("i18n.btn_submit") }}</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>
<script>
import DialogFlowEmployeeComponetVue from "./DialogFlowEmployeeComponet.vue";
export default {
  emits: ["confirmEvent"],
  props: {},
  data() {
    return {
      dialogNextNodeisible: false,
      nextNodeInfo: [],
      nextStepId: "",
      parallelTask: 0,
      nextStepIds: [],
      processType: 0,
    };
  },
  components: { DialogFlowEmployeeComponetVue },
  methods: {
    confirm(eventType) {
      let res = [];
      let b = true;
      if (eventType !== "canle") {
        this.nextStepIds.forEach((element) => {
          let rs = this.nextNodeInfo.filter((o) => o.nextStepId == element);
          if (rs.length > 0) res.push(rs[0]);
        });
        if (res.length == 0) {
          b = false;
        } else {
          for (let index = 0; index < res.length; index++) {
            const element = res[index];
            if (
              element.approvalRangeType != 4 &&
              element.approvalRangeType != 5 &&
              (element.nextStepApproverEmpId == null ||
                element.nextStepApproverEmpId == undefined ||
                element.nextStepApproverEmpId.length == 0)
            ) {
              b = false;
              break;
            }
          }
        }
      }
      if (b) {
        this.dialogNextNodeisible = false;
        this.$emit("confirmEvent", {
          eventType: eventType,
          result: res,
        });
      } else {
        this.$message.error(
          this.$t("flowi18n.flow_center_error_selectapprover")
        );
      }
    },
    dialogTableAddSystemControl(item) {
      let emps = [];
      item.nextStepApproverEmps.forEach((element) => {
        emps.push({
          empId: element.value,
          cnName: element.cnName,
          enName: element.enName,
        });
      });
      this.$refs.flowemp.paramters = {
        fieldKey: {
          fieldKey: item.nextStepId,
          selectType: item.isMultiSelect ? 1 : 0,
        },
        data: emps,
        exceptDataField: [],
        node: item,
      };
      this.$refs.flowemp.dialogEmpVisible = true;
      this.$refs.flowemp.InitData();
    },
    ///人员选择好后的事件
    formDialogEvent(event) {
      this.nextNodeInfo.forEach((element) => {
        if (element.nextStepId === event.key.fieldKey) {
          element.nextStepApproverEmps = [];
          element.nextStepApproverEmpId = [];
          event.result.forEach((re) => {
            element.nextStepApproverEmps.push({
              empId: re.empId,
              cnName: re.cnName,
              enName: re.enName,
            });
            element.nextStepApproverEmpId.push(re.empId);
          });
        }
      });
    },
    ///清除常用参数值
    clearValue(value, item) {
      item.nextStepApproverEmps = item.nextStepApproverEmps.filter(
        (o) => o.value !== value
      );
    },
    handleCheckedCitiesChange(value, item) {
      if (this.parallelTask == 1) {
        this.nextStepIds = [];
        if (value) this.nextStepIds.push(item.nextStepId);
        this.nextStepId = item.nextStepId;
      }
    },
  },
};
</script>
